<template>
    <div class="works-upload-container">
        <i-form ref="model" :model="model" :rules="ruleValidate">
            <Row type="flex">
                <i-col span="24">
                    <Form-item label="案件来源" prop="case_source">
                        <i-input v-model="model.case_source" type="textarea" placeholder="请输入案件来源"></i-input>
                    </Form-item>
                </i-col>
            </Row>
            <Row type="flex">
                <i-col span="11">
                    <Form-item label="调解人员" prop="users_id">
                        <i-select v-model="model.users_id" style="width: 100%"
                                  :clearable="true"
                                  placeholder="请选择调解人员">
                            <i-option v-for="item in mediators" :value="item.value"
                                      :key="item.value">{{item.label}}
                            </i-option>
                        </i-select>
                    </Form-item>
                </i-col>
                <i-col span="11" offset="2">
                    <Form-item label="调解时间" prop="case_time">
                        <DatePicker :editable="false" format="yyyy-MM-dd HH:mm:ss" style="width: 100%" type="datetime"
                                    v-model="model.case_time" placeholder="请输入调解时间"></DatePicker>
                    </Form-item>
                </i-col>
            </Row>
            <Row type="flex">
                <i-col span="11">
                    <Form-item label="案件类型" prop="case_type">
                        <i-select v-model="model.case_type" @on-change="TypeChange" style="width: 100%"
                                  :clearable="true"
                                  placeholder="请选择案件类型">
                            <i-option v-for="(item,index) in lists" :value="index"
                                      :key="index">{{item}}
                            </i-option>
                        </i-select>
                    </Form-item>
                </i-col>
                <i-col span="11" offset="2">
                    <Form-item label="评分" prop="code">
                        <Rate v-model="model.code" :count="4" style="width: 100%"></Rate>
                    </Form-item>
                </i-col>
            </Row>
            <Row type="flex">
                <i-col span="24">
                    <Form-item label="双方当事人基本情况" prop="parties">
                        <i-input v-model="model.parties" type="textarea" placeholder="请输入双方当事人基本情况"></i-input>
                    </Form-item>
                </i-col>
            </Row>
            <Row type="flex">
                <i-col span="24">
                    <Form-item label="双方当事人联系方式" prop="parties_tel">
                        <i-input v-model="model.parties_tel" type="textarea" placeholder="请输入双方当事人联系方式"></i-input>
                    </Form-item>
                </i-col>
            </Row>
            <Row type="flex">
                <i-col span="24">
                    <div class="pull-right">
                        <i-button type="primary" @click="onNext" :disabled="nextDisabled">下一步</i-button>
                    </div>
                </i-col>
            </Row>
        </i-form>
    </div>
</template>
<script>
  import { mapState } from 'vuex'
  export default {

  props: {
    caseId: {
      type: [Number,String],
      default: 0
    },
    stateManager: {
      type: Object
    }
  },
  data()
  {
    return {
      loading: false,
      model: this.$modelDataSource({
        url: '/api/case',
        dataKey: 'model',
        attributes: {
          id: 0,
          case_source: '',
          users_id: '',
          case_time: '',
          parties: '',
          parties_tel: ''
        }
      }),
      ruleValidate: {
        case_source: [
          {required: true, message: '请填写案件来源', trigger: 'blur'}
        ],
        case_time: [
          {required: true,type:'object', message: '请填写调解时间', trigger: 'change'}
        ],
        users_id: [
          {required: true, type: 'number', message: '请选择调解人员', trigger: 'change'}
        ],
        case_type: [
          {required: true, type: 'number', message: '请选择案件类型', trigger: 'change'}
        ],
        parties: [
          {required: true, message: '请填写双方当事人基本情况', trigger: 'blur'}
        ],
        parties_tel: [
          {required: true, message: '请填写双方当事人联系方式', trigger: 'blur'}
        ],
      },
      lists:[
        '婚姻家庭类',
        '生产经营类',
        '财产类',
        '侵权类',
        '劳动争议类',
        '社会管理类',
      ],
      nextDisabled: false
    }
  }
  ,
  created()
  {
    this.$store.dispatch('fetchMediatorList')
    let self = this
    this.model.fetch(this.caseId, {}, function () {
      self.stateManager.buttonLoading = false
      self.stateManager.editDialogVisible = true
    }, function () {
      self.stateManager.buttonLoading = false
    })
  }
  ,
  methods: {
    onNext(e)
    {
      let self = this
      self.$refs['model'].validate((valid) => {
        if (valid) {
          console.log('表单验证通过')
          self.model.case_time = new Date(self.model.case_time).format("yyyy-MM-dd hh:mm:ss")
          self.model.save(function () {
            self.$Notice.success({
              title: '保存成功',
            })
            self.$emit('next', self.model.id)
          }, function () {
          })
        } else {
          console.log('表单验证失败')
      }
    })
    },
    TypeChange(){
      let vm = this
      axios.get(`/api/data/laws/${this.lists[this.model.case_type]}`).then(res=>{
        res.data.data.map( function(value){
          vm.$Notice.open({
            title: '相关法律法规',
            render: h => {
              return   h('Button', {
                props: {
                  type:"text",
                  size: 'large'
                },
                style: {
                  marginRight: '8px'
                },
                on: {
                  click: function () {
                    vm.goLaws(value);
                  }
                }
              }, value.name)
            },
            duration: 0
          });
        })
      })
    },
    goLaws(item){
      this.$Modal.info({
        title: item.name,
        render: h => {
          return h('span',item.content)
        }
      });
    }
  }

  ,
  computed: {
    mediators()
    {
      return this.$store.state.mediators
    }
  ,
  }
  }
</script>
<style>
    .ss{
        color: #5bc0de;
    }
</style>
